<template>
  <div class="app-container calendar-list-container">
    <div name="searchColums">
      <el-form :inline="true" :model="filters" label-width="120px" size="mini" ref="filters" class="searchForm">
        <el-form-item label="所属小区" prop="communityId">
          <el-select  v-model="filters.communityId" placeholder="请选择" @change="handleSelectBuilding">
            <el-option v-for="communitItem in communityOptions" :key="communitItem.id" :label="communitItem.name"
                       :value="communitItem.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼宇" prop="buildingId">
          <el-select  v-model="filters.buildingId" placeholder="请选择" @change="handleSelectUnit">
            <el-option v-for="(buildingItem,index) in buildingOptions" :key="index" :label="buildingItem.name"
                       :value="buildingItem.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元" prop="unitId">
          <el-select  v-model="filters.unitId" placeholder="请选择" @change="handleSelectHouse">
            <el-option v-for="(unitItem,index) in unitOptions" :key="index" :label="unitItem.name"
                       :value="unitItem.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋" prop="houseId">
          <el-select v-model="filters.houseId" placeholder="请选择">
            <el-option v-for="(houseItem,index) in houseOptions" :key="houseItem.id" :label="houseItem.houseName"
                       :value="houseItem.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="业主姓名" prop="userName">
          <el-input  v-model="filters.userName" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item  label="缴费情况"  prop="propertyFeeType">
          <el-select  v-model="filters.propertyFeeType" clearable placeholder="请选择">
            <el-option v-for="item in propertyFeeTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <span class="bth_search">
          <el-form-item>
            <el-button type="success" icon="el-icon-search" v-on:click="getList(true)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetSearchForm('ruleForm')">重置</el-button>
          </el-form-item>
        </span>
      </el-form>
    </div>
    <!--toolbar-->
    <el-table :key='tableKey' :data="list" v-loading="listLoading" size="mini" :header-row-class-name="headStyle" element-loading-text="加载中..." border
               style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column align="center" type="index" label="序号">

      </el-table-column>
      <el-table-column align="center" label="业主姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="小区名称">
        <template slot-scope="scope">
          <span>{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="楼宇名称">
        <template slot-scope="scope">
          <span>{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单元名称">
        <template slot-scope="scope">
          <span>{{ scope.row.unitName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="房屋名称">
        <template slot-scope="scope">
          <span>{{ scope.row.houseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="物业费截止时间">
        <template slot-scope="scope">
          <span>{{ scope.row.proertyEndTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-col :span="24" class="toolbar" id="pageDiv">
      	<div style="background-color: Salmon;width: 15px;height: 15px;display: inline-block;"></div><span style="font-size: 14px;">:已超期</span>
        <el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange"
                       :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
                       layout="total,sizes, prev, pager, next" style="float:right;">ddddd</el-pagination>
      </el-col>
    </div>
  </div>
</template>
<style>
  .el-table .warning-row {
    background: Salmon;
  }
</style>

<script>
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import {mapGetters} from 'vuex'
  import request from "@/router/axios";

  export default {
    name: 'table_payment_warn',
    directives: {
      waves
    },
    data() {
      return {
        communityOptions: [],
        buildingOptions: [],
        unitOptions: [],
        houseOptions: [],
        liftUserOptions: [
          {
            id: '',
            name: ''
          }
        ],
        default_expended_key: [],
        url: {
          //单元数据
          list: "/admin/paymentWarn/page"
        },
        list: [],
        listLoading: true,
        total: 0,
        page: 1,
        pageSize: 10,
        propertyFeeTypeOptions: [],
        filters: {
          userName: '',
          propertyFeeType: '',
          communityId: '',
          buildingId: '',
          unitId: '',
          houseId: ''
        },
        form: {},
        tableKey: 0
      }
    },
    computed: {
      ...mapGetters([
        'permissions'
      ])
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: '有效',
          1: '无效'
        }
        return statusMap[status]
      }
    },
    created() {
      this.initDictsData()
      this.initData()
      this.getList()
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        var date = new Date()
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        if (row.proertyEndTime < currentdate) {
          return 'warning-row'
        }
        return ''
      },
      headStyle({row,rowIndex}) {
				return "table_head_style";
			},
      //初始化数据字典
      initDictsData: function () {
        request.get("/admin/dict/type/property_fee_type").then((res) => {
          if (res.status === 200) {
            this.propertyFeeTypeOptions = res.data;
          }
        });
      },
      //初始化下拉框
      initData: function () {
        request.get('/admin/community?getCommunitysByUserId').then(res => {
          if (res.status === 200) {
            this.communityOptions = res.data
          }
        })
      },
      handleSelectBuilding() {
        this.filters.buildingId = ''
        this.filters.unitId = ''
        this.filters.houseId = ''
        this.filters.liftUser = ''
        request
          .get(
            '/admin/communityBuilding/getCommunityBuildings/' +
            this.filters.communityId
          )
          .then(res => {
            if (res.status === 200) {
              this.buildingOptions = res.data
            }
          })
      },
      handleSelectUnit() {
        this.filters.unitId = ''
        this.filters.houseId = ''
        this.filters.liftUser = ''
        request
          .get(
            '/admin/communityBuilding/getBuildingUnits/' + this.filters.buildingId
          )
          .then(res => {
            if (res.status === 200) {
              // 判断楼宇下单元数据是否为空
              if (res.data.length === 0) {
                // 说明该楼宇下没有单元数据，直接去获取到房屋列表
                this.unitOptions = []
                request
                  .get(
                    '/admin/unitHouse/getUnitHousesByBuildingId/' +
                    this.filters.buildingId
                  )
                  .then(res => {
                    if (res.status === 200) {
                      this.houseOptions = res.data
                    }
                  })
              } else {
                this.unitOptions = res.data
              }
            }
          })
      },
      handleSelectHouse() {
        this.filters.houseId = ''
        this.filters.liftUser = ''
        request
          .get('/admin/unitHouse/getUnitHouses/' + this.filters.unitId)
          .then(res => {
            if (res.status === 200) {
              this.houseOptions = res.data
            }
          })
      },
      //获取单元列表数据
      getList(flag) {
      	if(flag){
      		this.page = 1;
      	}
        let para = {
          params: {
            page: this.page,
            limit: this.pageSize,
            userName: this.filters.userName,
            propertyFeeType: this.filters.propertyFeeType,
            communityId: this.filters.communityId,
            buildingId: this.filters.buildingId,
            unitId: this.filters.unitId,
            houseId: this.filters.houseId
          }
        };
        this.listLoading = true;
        request.get(this.url.list, para).then((res) => {
          this.total = res.data.total;
          var datas = res.data.records;
          this.list = datas;
          this.listLoading = false;
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.page = 1;
        this.getList()
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getList()
      },

      resetSearchForm(formName) {
        this.filters = {
          userName: '',
          propertyFeeType: '',
          communityId: '',
          buildingId: '',
          unitId: '',
          houseId: ''
        }
      }
    }
  }
</script>
